import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { colors } from "../Style/Colors";
import { hp } from "../Style/responsive";
import { setFontSize } from "./SetSize";

export class PatientProfileComponent extends Component {
  setGender = gender => {
    if (gender === "M") {
      return "Male";
    } else {
      return "Female";
    }
  };

  render() {
    const { data } = this.props;

    return (
      <View style={styles.container}>
        <View style={styles.profileWrapper}>
          <View style={styles.infoWrapper}>
            <View style={styles.nameSection}>
              <Text style={styles.title}>
                PIN :{" "}
                <Text style={styles.subtitle}>{data.REGNO || data.RegNo}</Text>
              </Text>
              <Text style={styles.title}>
                {data.REFNO ? "VOUCHER" : "ADM NO"} :{" "}
                <Text style={styles.subTitle}>{data.REFNO || data.IPDNO}</Text>
              </Text>
            </View>
            <View style={styles.nameSection}>
              <Text style={styles.title}>
                NAME : <Text style={styles.subtitle}>{data.PAT_NAME}</Text>
              </Text>
            </View>
            <View style={styles.nameSection}>
              <Text style={styles.title}>
                AGE : <Text style={styles.subtitle}> {data.AGE} Y</Text>
              </Text>
              <Text style={[styles.title, { marginLeft: 50 }]}>
                GENDER :{" "}
                <Text style={styles.subtitle}>
                  {this.setGender(data.GENDER)}
                </Text>
              </Text>
            </View>
            <View style={styles.nameSection}>
              <Text style={styles.title}>
                LOCATION : <Text style={styles.subtitle}>{data.LOC}</Text>
              </Text>
            </View>
            <View style={styles.nameSection}>
              <Text style={styles.title}>
                DR : <Text style={styles.subtitle}>{data.CONDOC}</Text>
              </Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.offWhite
  },
  profileWrapper: {
    backgroundColor: colors.primaryColor,
    paddingHorizontal: 4,
    flexDirection: "row",
    height: hp("24%"),
    marginBottom: 10,
    alignItems: "center",
    justifyContent: "center",
    paddingBottom: 8
  },
  imgContainer: {
    justifyContent: "center"
  },
  infoWrapper: {
    justifyContent: "center",
    flex: 1
  },
  nameSection: {
    flexDirection: "row",
    padding: 4,
    marginRight: 10,
    paddingVertical: 4
  },
  title: {
    color: colors.whiteColor,
    fontSize: setFontSize("2.3", "2.0"), //2.2 //1.9
    marginHorizontal: 8
  },
  subtitle: {
    fontSize: setFontSize("2.2", "1.9"), //2.1 //1.8
    color: colors.whiteColor
  }
});

export default PatientProfileComponent;
